<template>
  <div class="wrapper">
    <myHeader :obj="myObj" @events="events"></myHeader>
    <main>
      <div class="myMoney">
        <div class="money">¥{{burse.Money}}</div>
        <p class="text3_0314">账户余额</p>
      </div>
      <!-- <div class="buttonWrap">
        <myButton>交易明细</myButton>
      </div> -->
      <div class="catalogue"><i></i>收入明细</div>
      <div class="no" v-if="!burse.TradingRecord.length">
        暂无记录
      </div>
      <div v-for="item in burse.TradingRecord" class="items">
        <div class="item_l">
          <span>{{item.TypeName}}</span>
          <time>{{item.Time}}</time>
        </div>
        <div class="item_r">{{item.Monery}}</div>
      </div>
    </main>
  </div>
    
</template>
<script>
import myHeader from './base/myHeader';
import myButton from './base/myButton';
import Apis from '../assets/js/expertApi';
import hgjSkip from '../assets/js/hgjSkip';
export default {
  props:{
    index:{}
  },
  data () {
    return {
      myObj:{
        type: 3,
        text: '我的行家'
      },
      burse: {
        Money: 0,
        TradingRecord: []
      }

    }
  },
  created () {
    hgjSkip.skip().then(res => {
      this.getBurse(res[1]);
    })
    
  },
  methods: {
    // 我的钱包
    async getBurse(res) { // 返回我的钱包金额，同时返回最近的10条交易信息
      let Res = await Apis.getUserBurse(res);
      this.burse.Money = Res.Result.Monery;
      Res.Result.TradingRecord.forEach(e => {
        let item = {
          Monery: e.Monery,
          Time: e.Time,
          TypeName: e.TypeName
        }
        this.burse.TradingRecord.push(item);
      });

    },
    
    events(i){
      if(i == 2){
        history.back();
      }
    }
  },
  components: {
    myHeader,
    myButton
  }
}

</script>
<style lang="less">
.wrapper{
  height: 100%;
  width: 3.75rem;
    main{
      width: 3.75rem;
      height: 100%;
      padding-top: .44rem;
      position: absolute;
      top: 0;
      left: 0;
      overflow-y: auto;
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
      .no {
        width: 100%;
        height: .6rem;
        padding: 0 .15rem;
        box-sizing: border-box;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .16rem;
      }
      .items {
        width: 100%;
        height: .6rem;
        padding: 0 .15rem;
        box-sizing: border-box;
        background: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: .01rem solid #E5E5E5;
        &:nth-last-of-type(1){
          border-bottom: none;
        }
        .item_r {
          font-size: .17rem;
        }
        .item_l {
          span {
            color: #000000;
            font-size: .17rem;
            //width: .34rem;
            height: .24rem;
            line-height: .24rem;
            display: block;
            font-weight: bold;
          }
          time{
            color:#888888;
            font-size: .13rem;
            line-height: .18rem;
            display: block;
          }
        }
      }
      .catalogue {
        padding:  .15rem .14rem;
        height: .15rem;
        font-size: .18rem;
        color: #39393D;
        font-weight: bold;
        display: flex;
        align-items: center;
        i{
          display: block;
          width: .19rem;
          height: .19rem;
          background: #828282;
          background: url('../assets/img/expert/icon_shou@3x.png') center center;
          background-size: cover;
          background-repeat: no-repeat;
          border-radius: 50%;
          margin-right: .08rem;
        }
      }
      .buttonWrap {
        padding: .18rem 0 .25rem;
      }
      .myMoney {
        padding-top: .22rem;
        width: 3.75rem;
        border-top: .01rem solid #E5E5E5;
        background: white;
        height: 1.2rem;
        color: #39393D;
        font-size: .36rem;
        line-height: .36rem;
        font-weight: bold;
        text-align: center;
        box-sizing: border-box;
        .text3_0314 {
          padding-top: .12rem;
          font-size: .12rem;
          display: flex;
          justify-content: center;
          color: #888888;
          text-align: center;
          height: .12rem;
          line-height: .12rem;
        }
      }
      

    }
    
  
  }
  
</style>
